<template>
	<view class="main">

		<van-dialog v-model:show="show" title="微信号" :overlay="false" :show-cancel-button="false"
			:show-confirm-button="false">
			<view class="vandialog">
				<view class="wenzi">
					微信：lu15272771765
				</view>
				<view class="btns">
					<view class="cancel" @click="()=>handleCancel()">
						取消
					</view>
					<view class="submit" @click="()=>handleSubmit()">
						复制
					</view>
				</view>
			</view>
		</van-dialog>
		<van-dialog v-model:show="show2" title="" :overlay="false" :show-cancel-button="false"
			:show-confirm-button="false">
			<view class="vandialog">
				<view class="wenzi" style="margin-top: 30px;">
					可在手机端拨打 15272771765
				</view>
				<view class="btns">
					<view class="cancel" @click="handleCancel(2)">
						取消
					</view>
					<view class="submit" @click="handleSubmit(2)">
						复制到剪切板
					</view>
				</view>
			</view>
		</van-dialog>
		<!-- <movable-area>
			<movable-view>
			</movable-view>

		</movable-area> -->
		<!-- <Test></Test> -->


		<view class="wximage" @click.stop="showWX" @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove"
			@touchend.stop="onTouchEnd" ref="draggableDiv" :style="boxStyle" id="box">
			<van-image round width="100rpx" height="100rpx" src="/static/icon/Group 995.png" />
		</view>

		<view class="phoneimage" @click.stop="showPhone" @touchstart.stop="onTouchStart2" @touchmove.stop="onTouchMove2"
			@touchend.stop="onTouchEnd2" :style="boxStyle2" ref="draggableDiv2">
			<van-image round width="100rpx" height="100rpx" src="/static/icon/Group 989.png" />
		</view>

	</view>

</template>

<script>
	import Test from '@/components/test.vue'
	import {
		showConfirmDialog
	} from 'vant';
	import {
		showToast
	} from 'vant';
	export default {
		components: {
			Test
		},
		data() {
			return {
				show: false,
				show2: false,
				homeIconStyle: {
					transform: 'translateX(0)',
					transition: 'transform 0.3s ease'
				},
				sampleIconStyle: {
					transform: 'translateX(0)',
					transition: 'transform 0.3s ease'
				},
				position: {
					left: uni.getSystemInfoSync().screenWidth - 80,
					top: 470
				},
				position2: {
					left: uni.getSystemInfoSync().screenWidth - 80,
					top: 550
				},
				initialPosition: {
					top: 0,
					left: 0
				},
				initialPosition2: {
					top: 0,
					left: 0
				},
				dragStart: {
					x: 0,
					y: 0
				},
				dragStart2: {
					x: 0,
					y: 0
				},
				dragging: false,
				dragging2: false,
				screenWidth: uni.getSystemInfoSync().screenWidth
			}
		},
		computed: {
			boxStyle() {
				return {
					position: 'fixed',
					left: `${this.position.left}px`,
					top: `${this.position.top}px`,
				};
			},
			boxStyle2() {
				return {
					position: 'fixed',
					left: `${this.position2.left}px`,
					top: `${this.position2.top}px`,
				};
			}
		},
		methods: {
			showWX() {
				this.show = true
			},
			showPhone() {
				this.show2 = true
			},
			handleCancel(data) {
				if (data) {
					this.show2 = false
				} else {
					this.show = false
				}

			},
			handleSubmit(data) {
				if (data) {
					navigator.clipboard.writeText('15272771765').then(res => {
						this.show2 = false
					})
				} else {
					navigator.clipboard.writeText('微信：lu15272771765').then(res => {
						this.show = false
						setTimeout(() => {
							showToast('内容已复制');
						}, 200)
					})
				}

			},
			onTouchStart(event) {
				event.stopPropagation()
				const touch = event.touches[0];
				this.dragging = true;
				// 记录手指按下时的位置与div的初始位置差值
				this.dragStart.x = touch.clientX - this.position.left;
				this.dragStart.y = touch.clientY - this.position.top;
				this.initialPosition = {
					...this.position
				};
			},
			onTouchMove(event) {
				event.stopPropagation()
				if (!this.dragging) return;
				const touch = event.touches[0];
				// 计算新的位置
				this.position.left = touch.clientX - this.dragStart.x;
				this.position.top = touch.clientY - this.dragStart.y;
				// 这里可以添加边界检测，防止拖拽出屏幕
				// 例如：
				// if (this.position.left < 0) this.position.left = 0;
				// if (this.position.top < 0) this.position.top = 0;
				// ...（根据屏幕大小计算其他边界）
			},
			onTouchEnd() {
				this.dragging = false;
				if (this.position.left > this.screenWidth / 2) {
					this.position.left = this.screenWidth - 80
				} else {
					this.position.left = 20
				}
				// 这里可以添加拖拽结束后的逻辑，比如保存新位置
			},
			onTouchStart2(event) {
				event.stopPropagation()
				const touch = event.touches[0];
				this.dragging2 = true;
				// 记录手指按下时的位置与div的初始位置差值
				this.dragStart2.x = touch.clientX - this.position2.left;
				this.dragStart2.y = touch.clientY - this.position2.top;
				this.initialPosition2 = {
					...this.position2
				};
			},
			onTouchMove2(event) {
				event.stopPropagation()
				if (!this.dragging2) return;
				const touch = event.touches[0];
				// 计算新的位置
				this.position2.left = touch.clientX - this.dragStart2.x;
				this.position2.top = touch.clientY - this.dragStart2.y;
				// 这里可以添加边界检测，防止拖拽出屏幕
				// 例如：
				// if (this.position.left < 0) this.position.left = 0;
				// if (this.position.top < 0) this.position.top = 0;
				// ...（根据屏幕大小计算其他边界）
			},
			onTouchEnd2() {
				this.dragging2 = false;
				if (this.position2.left > this.screenWidth / 2) {
					this.position2.left = this.screenWidth - 80
				} else {
					this.position2.left = 20
				}
				// 这里可以添加拖拽结束后的逻辑，比如保存新位置
			},
		}

	}
</script>

<style lang="scss" scoped>
	.main {
		// position: fixed;
		// position: absolute;
		z-index: 1000;
		right: 30rpx;
		bottom: 350rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.wximage {
		z-index: 10001;
		user-select: none;
		// position: fixed;
		// left: 20px;
		// bottom: 100px;
	}

	.phoneimage {
		z-index: 10000;
	}

	.vandialog {
		.wenzi {
			margin-top: 30rpx;
			height: 100rpx;
			text-align: center;
		}

		padding-bottom: 50rpx;

		.btns {
			display: flex;
			justify-content: center;
			gap: 30rpx;

			.cancel {
				background-color: #f2f2f2;
				border-radius: 20rpx;
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.submit {
				background-color: #07c160;
				border-radius: 20rpx;
				color: #fff;
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>